<template>
  <div class="paper">
    <el-tabs v-model="activeName" @tab-click="handleClickTab">
      <el-tab-pane label="已发表" name="released">
        <Released :status="0" v-if="activeName === 'released'" />
      </el-tab-pane>
      <el-tab-pane label="未发表" name="toBeReleased">
        <Released :status="1" v-if="activeName === 'toBeReleased'" />
      </el-tab-pane>
      <el-tab-pane label="已撤回" name="withdrawn">
        <Released :status="2" v-if="activeName === 'withdrawn'" />
      </el-tab-pane>
    </el-tabs>
    <copyright class="bottom-layer" />
  </div>
</template>

<script>

import Released from './released'
export default {
  name: 'Paper',
  components: {
    Released
  },
  data() {
    return {
      activeName: 'released',
      toBeReleasedData: [],
      withdrawnData: [],
    }
  },
  methods: {
    handleClickTab(active) {
      this.activeName = active.name
    }
  },
}
</script>

<style scoped>
.paper {
  position: relative;
  min-height: calc(100vh - 120px);
}
</style>